<template>
  <n-layout style="height: 100vh">
    <n-layout-header style="height: 64px; padding: 24px" bordered>
      <div style="display: flex; justify-content: flex-end; align-items: center; height: 100%;">
        <n-dropdown trigger="hover" :options="options" @select="handleSelect"
                    placement="bottom-end"
                    :animated="true"
                    :size="medium"
                    style="right: 0;top: 100%;border-radius: 12px;">
          <n-avatar
            size="small"
            :style="{
            color:'yellow',
            backgroundColor: 'red',
            }">
            M
          </n-avatar>
        </n-dropdown>
      </div>
    </n-layout-header>
    <n-layout style="height: calc(100vh - 64px - 24px)"  has-sider>
      <n-layout-sider
          collapse-mode="width"
          :collapsed-width="0"
          :width="250"
          show-trigger="arrow-circle"
          content-style="padding: 24px;"
          bordered
          class="custom-sidebar"
      >
        <n-icon size="25" class="icon-hover">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M7 9H2V7h5v2zm0 3H2v2h5v-2zm13.59 7l-3.83-3.83c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L22 17.59L20.59 19zM17 11c0-1.65-1.35-3-3-3s-3 1.35-3 3s1.35 3 3 3s3-1.35 3-3zM2 19h10v-2H2v2z" fill="currentColor"></path></svg>
        </n-icon>
        <n-icon size="25" class="icon-hover">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M19 19H5V5h9V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9z" fill="currentColor"></path><path d="M15 13h2v4h-2zm-8-3h2v7H7zm4-3h2v10h-2zm8-2V3h-2v2h-2v2h2v2h2V7h2V5z" fill="currentColor"></path></svg>
        </n-icon>
        <n-space style="margin-bottom: 12px;margin-top: 10px">
          <n-anchor :show-rail="false" :show-background="false">
            <n-anchor-link title="今天">
              <n-anchor-link title="固定" />
              <n-anchor-link title="滚动到"/>
              <n-anchor-link title="忽略间隔" />
              <n-anchor-link title="基础用法" />
            </n-anchor-link>
            <n-anchor-link title="昨天">
              <n-anchor-link title="固定" />
              <n-anchor-link title="滚动到"/>
              <n-anchor-link title="忽略间隔" />
              <n-anchor-link title="基础用法" />
            </n-anchor-link>
            <n-anchor-link title="前七天">
              <n-anchor-link title="固定" />
              <n-anchor-link title="滚动到"/>
              <n-anchor-link title="忽略间隔" />
              <n-anchor-link title="基础用法" />
            </n-anchor-link>
          </n-anchor>
        </n-space>
      </n-layout-sider>
      <n-layout content-style="padding: 0px;" :native-scrollbar="false">
        <n-flex vertical justify="center">
          <n-flex justify="start" style="width: 100%;">
            <n-button style="margin-top: 10px;margin-left: 25px" :text="true" :bordered="false" icon-placement="right" secondary strong>
              <template #icon>
                <n-icon>
                  <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><path d="M6 9l6 6l6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                </n-icon>
              </template>
              <h3>{{modelCode}}</h3>
            </n-button>
          </n-flex>
        </n-flex>
        <n-flex style="margin-left: 25%">
          <!-- 显示聊天内容的区域 -->
          <n-card :bordered="false" title="聊天内容" style="flex: 1; overflow-y: auto;" class="card-container">
            <div class="chat-content">
              <div v-for="(message, index) in messages" :key="index">
                <p>{{ message }}</p>
              </div>
            </div>
          </n-card>
        </n-flex>
        <!--这个输入框在输入事件之后需要变成绝对布局-->
        <n-affix :bottom="35" style="margin-left:20%;width: 50%;padding: 8px !important;background-color: white;">
            <n-card style="border-radius: 12px;background: #f4f4f4;" shadow="small" content-style="padding: 5px"	>
              <n-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 9 }"
                  placeholder="输入消息..."
                  v-model="inputMessage"
                  :bordered="false"
                  style="background: #f4f4f4"
                  @keyup.enter="sendMessage"
              />
              <n-flex justify="space-between">
              <n-icon size="25" class="icon-hover">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M3.441 9.955a4.926 4.926 0 0 0 6.233 7.571l4.256 4.257a.773.773 0 0 0 1.169-1.007l-.075-.087l-4.217-4.218A4.927 4.927 0 0 0 3.44 9.955zm8.585-7.957c-4.756 0-8.736 3.319-9.751 7.767a5.912 5.912 0 0 1 2.235-1.74A8.525 8.525 0 0 1 8.906 4.09l-.107.174c-.538.893-.971 2.011-1.275 3.28c.499.05.991.164 1.465.34c.632-2.628 1.823-4.385 3.037-4.385l.115.005c1.266.116 2.488 2.118 3.056 4.996H10.2a5.945 5.945 0 0 1 1.55 1.499l3.674.001a18.974 18.974 0 0 1-.135 5h-2.646a5.883 5.883 0 0 1-.299.842l-.129.272l-.122.229l.158.157h2.715c-.203.749-.45 1.418-.732 1.985l1.106 1.107c.492-.858.891-1.908 1.178-3.09l2.723-.002a8.537 8.537 0 0 1-3.734 3.26l.225.223l.125.14c.22.296.345.625.378.953A10.002 10.002 0 0 0 22.027 12c0-5.524-4.478-10.002-10.001-10.002zm-2.712 9.05a3.38 3.38 0 1 1-4.78 4.78a3.38 3.38 0 0 1 4.78-4.78zM16.932 10l3.358-.001l.008.03c.15.633.23 1.292.23 1.97a8.483 8.483 0 0 1-.545 3l-3.174.002c.143-.95.218-1.958.218-3.001c0-.684-.032-1.353-.095-2zm-1.787-5.911l.023.008A8.531 8.531 0 0 1 19.776 8.5h-3.049c-.313-1.753-.86-3.278-1.582-4.41z" fill="currentColor"></path></g></svg>
              </n-icon>
              <n-button text @click="getData">
                  <n-icon size="25" class="icon-hover">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6l6 6l1.41-1.41L5.83 13H21V7h-2z" fill="currentColor"></path></svg>
                  </n-icon>
              </n-button>
              </n-flex>
            </n-card>
          </n-affix>

      </n-layout>
    </n-layout>
    <n-layout-footer
        style="height: 24px; padding: 14px"
        bordered
    >
    </n-layout-footer>
  </n-layout>
</template>

<style scoped>
.custom-sidebar {
  background-color: #f9f9f9;
}
.icon-hover {
  display: inline-flex;  /* 让图标和背景共存 */
  justify-content: center;
  align-items: center;
  padding: 8px;  /* 给图标增加内边距，使背景看起来更大 */
  transition: background-color 0.3s ease, transform 0.3s ease; /* 增加背景颜色和缩放的过渡效果 */
  border-radius: 8px; /* 设置圆角，保持图标边缘平滑 */
}

.icon-hover:hover {
  background-color: #ececec; /* 鼠标悬停时的背景颜色 */
  transform: scale(1.1); /* 鼠标悬停时轻微放大图标 */
}

.icon-hover svg {
  width: 24px; /* 图标的宽度 */
  height: 24px; /* 图标的高度 */
  fill: #333;  /* 图标的默认颜色 */
}
.chat-content {
  max-height: calc(100vh - 120px); /* 保证聊天内容区域可以滚动 */
  overflow-y: auto;
  padding-right: 8px;
}
.card-container{
  justify-content: center;

}
</style>
<script setup lang="ts">
// 使用 ref 来定义响应式数据
import {NAvatar,NText,useMessage} from 'naive-ui'
import {h,ref}  from "vue";

const renderCustomHeader=() =>{
  return h('div',
      {style: 'display: flex; align-items: center; padding: 8px 12px;'},
      [
        h(NAvatar,
            {round: true, style: 'margin-right: 12px;', src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG'}),
        h('div', null, [
          h('div', null, [h(NText, { depth: 2 }, { default: () => '打工仔' })]),
          h('div', { style: 'font-size: 12px;' }, [
            h(NText,
                { depth: 3 },
                { default: () => '毫无疑问，你是办公室里最亮的星' }
            )
          ])
        ])
      ]
  )
};
const options=ref([
  {key:'header',type:'render',render:renderCustomHeader},
  {key: 'header-divider',type: 'divider'},
  {label: '处理群消息 342 条', key: 'stmt1'},
  {label: '被 @ 58 次', key: 'stmt2'},
  {label: '加入群 17 个', key: 'stmt3'}
])

const modelCode = ref("DIEN")
const inputMessage = ref(""); // 输入框的消息
const messages = ref(['你好！', '欢迎使用我们的服务！']); // 消息列表

// 发送消息函数
const sendMessage = () => {
  if (inputMessage.value.trim()) {
    messages.value.push(inputMessage.value); // 将输入的消息添加到 messages 数组中
    inputMessage.value = ''; // 清空输入框
  }
};

const getData = () =>{
  console.info(inputMessage.value)
}


const handleSelect=(key: string | number) =>{

}

</script>